<template>
    <div class="printRecords">
        <div class="printRecords-container">
            <div class="printRecords-container-top">
                <div class="print-top-left">打印机记录查询</div>
                    <!-- <div class="top-left"></div> -->
                    <div class="top-right" @click="router.replace({path: '/cashier/print'})">关闭</div>
            </div>
            <div class="printRecords-container-nav">
                    <div class="upper-item spe">
                        <div class="book-title">打印时间：</div>
                        <el-date-picker v-model="reserveShow.operDate" type="datetimerange" start-placeholder="开始时间"
                        end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
                    </div>
                    <div class="upper-item small" @click="allTableSelectShow = true" style="cursor: pointer;">
                        <div class="book-title">桌台号：</div>
                        <el-input v-model="reserveShow.roomName" placeholder="请选择桌台号" readonly></el-input>
                        <!-- <el-select v-model="reserveShow.RoomCode" placeholder="请选择"  :suffix-icon="IconDropDown">
                            <el-option
                            v-for="item in selectList.RoomCodes"
                            :key="item.Code"
                            :label="item.Name"
                            :value="item.Code"
                            >
                            </el-option>
                        </el-select> -->
                    </div>
                    <div class="upper-item">
                        <div class="book-title">小票类型：</div>
                        <el-select v-model="reserveShow.PrintType" placeholder="请选择"  :suffix-icon="IconDropDown">
                            <el-option
                            v-for="item in selectList.PrintTypes"
                            :key="item.Value"
                            :label="item.Description"
                            :value="item.Value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="upper-item spe">
                        <div class="book-title">打印机：</div>
                        <el-select v-model="reserveShow.PrintCode" placeholder="请选择"  :suffix-icon="IconDropDown">
                            <el-option
                            v-for="item in selectList.Prints"
                            :key="item.Code"
                            :label="item.Name"
                            :value="item.Code"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="upper-item small">
                        <div class="book-title">打印状态：</div>
                        <el-select v-model="reserveShow.State" placeholder="请选择"  :suffix-icon="IconDropDown">
                            <el-option
                            v-for="item in selectList.PrintTaskStates"
                            :key="item.Value"
                            :label="item.Description"
                            :value="item.Value"
                            >
                            </el-option>
                        </el-select>
                    </div>
                    <div class="upper-item ">
                        <div class="search" @click="getPrintTable">查询</div>
                        <div class="clear" @click="reserveShow={}">清空筛选</div>
                    </div>
           
            </div>
            <div class="printRecords-container-main">
                <el-table
                    :data="tableData.rowData"
                    style="width: 100%"
                    header-row-class-name="tableHeaderRowClassName"
                >
                    <el-table-column prop="Code" label="编号" min-width="60" align="center"> </el-table-column>
                    <el-table-column prop="OrderBatchCode" label="订单号" min-width="60" align="center"> </el-table-column>
                    <el-table-column prop="RoomName" label="桌号" min-width="30" align="center"> </el-table-column>
                    <el-table-column prop="TypeName" label="小票类型" min-width="30" align="center"> </el-table-column>
                    <el-table-column prop="PrinterName" label="打印机" min-width="30" align="center"> </el-table-column>
                    <el-table-column prop="StateName" label="打印状态" min-width="30"  align="center"> </el-table-column>
                    <el-table-column prop="PatchPrintCount" label="补打次数" min-width="30"  align="center"> </el-table-column>
                    <el-table-column label="创建时间" min-width="60"  align="center">
                        <template #default="scope">{{ scope.row.CrDate }}</template>
                    </el-table-column>
                    <el-table-column label="完成时间" min-width="60"  align="center">
                        <template #default="scope">{{ scope.row.CompleteDate }}</template>
                    </el-table-column>
                    <el-table-column prop="GoodsNameList" label="菜品列表" min-width="40"  align="center"> </el-table-column>
                    <el-table-column prop="RetuenCode" label="返回编码" min-width="35"  align="center"> </el-table-column>
                    <el-table-column prop="ErrorMsg" label="失败原因" min-width="35"  align="center"> </el-table-column>
                    <el-table-column label="操作" min-width="60"  align="center">
                        <template #default="scope">
                            <div class="print-btn" @click="patchPrintView(scope.row)">预览小票</div>
                            <div class="print-btn" @click="patchPrint(scope.row)">补打小票</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="printRecords-container-footer">
                <el-pagination
                    background 
                    @size-change="changeSize"
                    @current-change="getPrintTable"
                    v-model:currentPage="reserveShow.PageIndex"
                    :page-size="reserveShow.PageSize"
                    layout="total, prev, pager, next,sizes, jumper"
                    :total="tableData.totalCount"
                >
                </el-pagination>
                 <button class="footer-button">确定</button>
            </div>
            <!-- <div class="printRecords-container-bottom">富德快Saas智能收银软件</div> -->
        </div>
        <!-- <div class="printRecords-preView" v-if="printHtml">
            <div class="print-btn">预览小票</div>
            <pre v-highlight>
                <code> {{ printHtml }}</code>
            </pre>
        </div> -->
    </div>
    <AllTableSelect v-model="allTableSelectShow" @cancel="allTableSelectShow = false" @confirm="selectTable"></AllTableSelect>
    <printDialog :visible="printVisible" @emitCancel="printVisible= false" :printHtml="printHtml" />
</template>

<script setup>
import Api from '@/api'
import dayjs from "dayjs"
import IconDropDown from '@/components/Icon/IconDropDown.vue'
import AllTableSelect from '@/views/components/AllTableSelect.vue'
import { transformWorkTime } from '@/utils/chenhao.js' 
import { ElNotification } from 'element-plus'
import useConfigStore from '@/store/config'  
import vkbeautify from 'vkbeautify';
import printDialog from './printDialog.vue'


const configStore = useConfigStore()
const router = useRouter()
const orgStartTime = configStore.shopInfo.orgReportStartTime //orgStartTime
const orgEndTime = configStore.shopInfo.orgReportEndTime //orgEndTime  

    // 查询条件显示用对象
    const reserveShow = ref({
        PageIndex:1,
        PageSize:8,
        Code:"",
        PrintType:"",//默认为出品
        RoomCode:"",
        roomName:'',
        PrintCode:"",
        State:"",
        operDate:transformWorkTime('今天', orgStartTime, orgEndTime) // 默认今天
    })
    const selectList=ref({});
    //获取下拉列表记录
    const getPrintSelects = () => {
        Api.Common.PcObjProcess.Do({ "functionName": "GetPrintTaskSelects", "contentData": {}, "orgCode": "0004" })
            .then(res => {
                selectList.value={...res};
                selectList.value.PrintTypes.unshift({"Value":"","Description":"全部"});
                selectList.value.Prints.unshift({"Code":"","Name":"全部"});
                selectList.value.PrintTaskStates.unshift({"Value":"","Description":"全部"});
            })
    }
    getPrintSelects();
    
    // pageSize 改变
    const changeSize = (e)=>{
        console.log(e);
        reserveShow.value.PageSize = e
        getPrintTable()
    }
    const allTableSelectShow = ref(false) // 桌台选择
    // 选中桌台
    const selectTable = (data)=>{
        if(data.name){
            console.log(data);
            reserveShow.value.RoomCode = data.code
            reserveShow.value.roomName = data.name
            allTableSelectShow.value = false
        }else{
            ElNotification({
            title: '提示',
            message: '请选择桌号',
            type: 'warning',
            })
        }
        
    }

    //获取打印记录列表
    const tableData = ref({});
    const getPrintTable = () => {
        console.log(reserveShow.value)
        let query = {
            ...reserveShow.value
        }
        console.log(query.operDate);
        
        if (query.operDate && query.operDate.length > 1) {
            query.startTime = query.operDate[0]
            query.endTime = query.operDate[1]
        }
        Api.Common.PcObjProcess.Do({ "functionName": "GetPrintTasks", "contentData": query })
            .then(res => {
                console.log(res)
                tableData.value={...res}
            })
    }
    getPrintTable();

    //补打小票预览
    const printHtml=ref("");
    const code=ref("");
    const printVisible = ref(false);
    const patchPrintView=(e)=>{
        console.log(e.Code)
        Api.Common.PcObjProcess.Do({ "functionName": "GetPrintPreview", "contentData": {"code":e.Code,"IsBak":e.IsBak}, "orgCode": "0004" })
            .then(res => {
                console.log(res.result,'res.result')
                printVisible.value = true

                // 示例：格式化 XML 字符串
                const xmlString = '.' +  res.result
                printHtml.value = vkbeautify.xml(xmlString.trim());
                console.log(printHtml.value,'formattedXml');

                code.value = e.code;
                console.log(res.result)
            })
    }

    //补打小票
    const patchPrint=(e)=>{
        code.value=e.Code;
        console.log(e);
        Api.Common.PcObjProcess.Do({ "functionName": "SetPrinterTaskState", "contentData": {"Code":code.value,"IsBak":e.IsBak}, "orgCode": "0004" })
            .then(res => {
                ElNotification({title: '提示',message: "成功", type: 'success'});
                console.log(res)
            })
    }
   
   
</script>

<style scoped lang="scss">
@import '@/styles/com_style_input.css';
.printRecords{
    background: #F2F2F2;
    white-space: nowrap;
    height: 100%;
    display: flex;
    justify-content: center;
    .printRecords-container{
        // margin: 0 auto;
        width: 1400px;
        padding: 20px 0 0 0;
        .printRecords-container-top{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 12px;
            .top-left{
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 20px;
                color: #212121;
                line-height: 20px;
            }
            .top-right{
                width: 100px;
                height: 48px;
                background: #CCCCCC;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #212121;
                line-height: 48px;
                text-align: center;
                cursor: pointer;
            }
        }
        .printRecords-container-nav{
            width: 1400px;
            height: 156px;
            background: #FFFFFF;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            padding-top: 20px;
            margin-bottom: 20px;
            .upper-item{
                display: flex;
                flex-basis: 33.33%;
                align-items: center;
                margin-bottom: 20px;
                &.spe{
                    flex-basis: 35%;
                }
                &.small{
                    flex-basis: 30% ;
                }
              
                ::v-deep(.el-date-editor .el-range__icon){
                    display: none
                }
                .book-title{
                    width: 120px;
                    text-align: right;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 16px;
                }
                .search{
                    width: 120px;
                    height: 48px;
                    background: #FFE566;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #212121;
                    line-height: 48px;
                    text-align: center;
                    margin-right: 20px;
                    margin-left: 120px;
                    cursor: pointer;
                }
                .clear{
                    width: 120px;
                    height: 48px;
                    background: #E6E6E6;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #666666;
                    line-height: 48px;
                    text-align: center;
                    cursor: pointer;
                }
            }
            ::v-deep(.el-date-editor.el-input){
                width: 260px;
                height: 48px;
            }
            ::v-deep(.el-select__wrapper) {
                width: 260px;
                height: 48px;
            }
            ::v-deep(.el-input__wrapper ){
                width: 260px;
                height: 48px;
            }
            ::v-deep(.el-select){
                width: 260px;
                height: 48px;
            }
            ::v-deep(.el-input){
                width: 260px;
                height: 48px;
            }
        }
        .printRecords-container-main{
            width: 1400px;
            min-height: 500px;
            background: #FFFFFF;
            border-radius: 8px;
            padding: 20px 40px 0;
            overflow-y: auto;
            .print-btn{
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 14px;
                color: #00AAFF;
                line-height: 14px;
                cursor: pointer;
            }
            ::v-deep(.tableHeaderRowClassName th){
                height: 48px;
                background: #F9F9F9;
             
            }
            ::v-deep(.el-table td.el-table__cell){
                border-bottom: none;
                height: 46px;
                padding: 0;
            }
            ::v-deep(.el-table__inner-wrapper:before ){
                display: none;
            }
        }
        .printRecords-container-footer{
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: 20px;
            .footer-button{
                background: #FF6A00;
                border-radius: 8px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 18px;
                padding: 15px 22px;
                margin-left: 20px;
                cursor: pointer;
            }
            ::v-deep(.el-pagination){
                // width: 100%;
            }
            ::v-deep(.el-pagination>.is-first ){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(li.number){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(.el-select__wrapper){
                width: 140px;
                height: 48px;
                background: #E6E6E6;
                border-radius: 8px;
                // margin-right: 20px;
            }
            ::v-deep(.el-pagination.is-background .el-pager li ){
                width: 48px;
                height: 48px;
                border-radius: 8px;
                background-color: #E6E6E6 ;
            }
            ::v-deep(.el-pagination>.is-last){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(.el-input__wrapper){
                width: 80px;
                height: 48px;
                background: #E6E6E6;
                border-radius: 8px;
            }
            ::v-deep(.el-pagination .el-input__inner ){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
            ::v-deep(.el-pagination.is-background .el-pager li.is-active){
                background-color: #FF6A00 !important;
                color: var(--el-color-white);
            }
            ::v-deep(.el-select__placeholder){
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 18px;
                color: #666666;
                line-height: 18px;
            }
        
            // ::v-deep(.el-pagination button *){
            //   width: 15px;
            //   height:24px;
            //   font-size: 18px;
            //   color: #666666;
            //   line-height: 18px;
            // }
        }
        .printRecords-container-bottom{
            padding-top: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #999999;
            line-height: 12px;
            transform: translateX(-33px);
        }
   }
   .printRecords-preView{
        margin-top: 78px;
        margin-left: 40px;
        width: 480px;
        height: 782px;
        background: #FFFFFF;
        border-radius: 8px;
        overflow-y: auto;
        .print-preview{
            margin: 0 auto;
            width: 300px;
        }
   }
   .print-top-left{
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 24px;
                    color: #212121;
                    line-height: 24px;
                }
}
</style>
